<template>
  <div class="shop-container">
    <a-layout style="min-height: 100vh">
      <!-- 头部 -->
      <a-layout-header class="shop-header">
        <div class="header-content">
          <div class="logo-area">
            <h2>商家管理</h2>
          </div>
          <div class="shop-name">
            <span class="shop-name-text">我的小店</span>
          </div>
          <div class="user-info">
            <span>商家管理台</span>
          </div>
        </div>
      </a-layout-header>

      <a-layout class="main-layout">
        <!-- 侧边栏 -->
        <a-layout-sider class="shop-sider" :width="240">
          <div class="sider-content">
            <a-menu
              :default-selected-keys="['1']"
              :default-open-keys="['sub1']"
              mode="inline"
              theme="dark"
              @menu-item-click="handleMenuClick"
            >
              <a-menu-item key="1">
                <icon-dashboard />
                控制台
              </a-menu-item>
              <a-sub-menu key="sub1" title="商品管理">
                <template #icon>
                  <icon-apps />
                </template>
                <a-menu-item key="2">商品列表</a-menu-item>
              </a-sub-menu>
              <a-sub-menu key="sub2" title="订单管理">
                <template #icon>
                  <icon-list />
                </template>
                <a-menu-item key="5">订单列表</a-menu-item>
                <a-menu-item key="6">订单统计</a-menu-item>
              </a-sub-menu>
              <a-sub-menu key="sub3" title="店铺设置">
                <template #icon>
                  <icon-settings />
                </template>
                <a-menu-item key="7">店铺信息</a-menu-item>
                <a-menu-item key="8">店铺装修</a-menu-item>
                <a-menu-item key="9">支付设置</a-menu-item>
              </a-sub-menu>
              <a-menu-item key="10">
                <icon-user />
                客户管理
              </a-menu-item>
              <a-menu-item key="11">
                <icon-bar-chart />
                数据分析
              </a-menu-item>
            </a-menu>
          </div>
        </a-layout-sider>

        <!-- 主要内容 -->
        <a-layout-content class="shop-content">
          <div class="content-wrapper">
            <router-view></router-view>
          </div>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script setup>
import { Message } from '@arco-design/web-vue'
import { useRouter } from 'vue-router'
import { IconDashboard, IconApps, IconList, IconSettings, IconUser, IconBarChart } from '@arco-design/web-vue/es/icon'
import { useShopStore } from '@/stores/shop.js'
import { shopAPI } from '@/api/shop/shop.js'
import { onMounted } from 'vue'

const router = useRouter()

// 使用shop store
const shopStore = useShopStore()

// 防止重复加载的标志
let isLoadingShopInfo = false

// 加载店铺信息
const loadShopInfo = async () => {
  // 如果Pinia store中已有店铺信息，则不再重复加载
  if (shopStore.shopInfo && Object.keys(shopStore.shopInfo).length > 0) {
    return
  }
  
  // 防止重复加载
  if (isLoadingShopInfo) {
    return
  }
  
  isLoadingShopInfo = true
  try {
    const response = await shopAPI.getShopByUserId()

    console.log('获取店铺信息响应:', response);
    
    if (response.code === 200 && response.data) {
      console.log(response.data);
      
      localStorage.setItem('shopId', response.data.id)
      console.log(localStorage.getItem('shopId'));
      
      shopStore.setShopId(response.data.id)
    } 
  } catch (error) {
    shopStore.clearShopId()
  } finally {
    isLoadingShopInfo = false
  }
}

// 菜单点击处理
const handleMenuClick = (key) => {
  // 路由跳转
  switch (key) {
    case '1':
      // 控制台 - 默认当前页面
      break
    case '2':
      // 商品列表
      router.push('/product/list')
      break
    case '5':
      // 订单列表
      Message.info('订单列表功能开发中...')
      break
    case '6':
      // 订单统计
      Message.info('订单统计功能开发中...')
      break
    case '7':
      // 店铺信息
      Message.info('店铺信息功能开发中...')
      break
    case '8':
      // 店铺装修
      Message.info('店铺装修功能开发中...')
      break
    case '9':
      // 支付设置
      Message.info('支付设置功能开发中...')
      break
    case '10':
      // 客户管理
      Message.info('客户管理功能开发中...')
      break
    case '11':
      // 数据分析
      Message.info('数据分析功能开发中...')
      break
    default:
      console.log('未知菜单项:', key)
  }
}

// 组件挂载时加载店铺信息
onMounted(() => {
  loadShopInfo()
})
</script>

<style scoped>
.shop-container {
  height: 100vh;
  overflow: hidden;
}

.shop-header {
  background: #001529;
  padding: 0;
  height: 64px;
  line-height: 64px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 21, 41, 0.35);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  color: white;
}

.logo-area {
  width: 200px;
}

.logo-area h2 {
  color: white;
  margin: 0;
  font-size: 20px;
}

.shop-name {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shop-name-text {
  color: #ffffff;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.user-info {
  font-size: 14px;
}

.main-layout {
  margin-top: 64px;
  height: calc(100vh - 64px);
}

.shop-sider {
  background: #001529;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  height: calc(100vh - 64px);
  position: fixed;
  left: 0;
  top: 64px;
  z-index: 999;
}

.sider-content {
  height: 100%;
  overflow-y: auto;
}

.sider-content::-webkit-scrollbar {
  width: 6px;
}

.sider-content::-webkit-scrollbar-track {
  background: #001529;
}

.sider-content::-webkit-scrollbar-thumb {
  background: #4a4a4a;
  border-radius: 3px;
}

.sider-content::-webkit-scrollbar-thumb:hover {
  background: #6a6a6a;
}

.shop-content {
  background: #f0f2f5;
  padding: 24px;
  margin-left: 240px;
  height: calc(100vh - 64px);
  overflow-y: auto;
}

.shop-content::-webkit-scrollbar {
  width: 8px;
}

.shop-content::-webkit-scrollbar-track {
  background: #f0f2f5;
}

.shop-content::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 4px;
}

.shop-content::-webkit-scrollbar-thumb:hover {
  background: #999;
}

.content-wrapper {
  min-height: 100%;
}
</style>